<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    h3 {
        height: 500px;
    }
</style>

<body>
    <h3>hhha</h3>
    <h3>hhha</h3>
    <h3>hhha</h3>
    <h3>hhha</h3>
    <h3>hhha</h3>
    <h3>hhha</h3>
    <h3>hhha</h3>

    <script>
        function debounce(func, wait) {
            if (typeof func !== 'function') {
                throw new TypeError('Expected a function');
            }
            if (typeof wait !== 'number') {
                throw new TypeError('Expected a number for wait');
            }

            let timeout;

            return function (...args) {
                const context = this;
                if (timeout) clearTimeout(timeout);
                timeout = setTimeout(() => func.apply(context, args), wait);
            };
        }

        // 防抖函数

        // 滚动事件
        window.onscroll = debounce(scrollHandler, 200)

        function scrollHandler() {
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            console.log(scrollTop);
        }

    </script>
</body>

</html>